<template>
  <div class="dashboard-container">
    <!-- 顶部 -->
    <!-- <div class="dashboard-header">
      <div class="logo">
        <img src="https://cdn.jsdelivr.net/gh/element-plus/element-plus@2.3.13/docs/public/favicon.ico" alt="logo">
        <span class="sys-name">XinP 控制台</span>
      </div>
      <div class="header-actions">
        <el-button type="text" icon="el-icon-bell" circle></el-button>
        <el-dropdown trigger="click">
          <span class="user-dropdown">
            <el-avatar size="32" src="https://randomuser.me/api/portraits/men/32.jpg"></el-avatar>
            <span class="user-name">{{ userName }}</span>
            <i class="el-icon-arrow-down" style="font-size:14px;color:#888;"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="item in userMenu" :key="item.label">
              <i :class="item.icon" style="margin-right:6px;"></i>{{ item.label }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div> -->

    <!-- 统计卡片区 -->
    <!-- <div class="dashboard-cards">
      <div class="dashboard-card" v-for="card in cards" :key="card.title">
        <span class="card-title">{{ card.title }}</span>
        <span class="card-value">{{ card.value }}<span class="card-unit">{{ card.unit }}</span></span>
        <span v-if="card.trend" class="card-trend" :class="card.trendType === 'down' ? 'down' : ''">{{ card.trend
        }}</span>
        <span class="card-desc">{{ card.desc }}</span>
        <span class="card-icon" v-html="card.iconHtml"></span>
      </div>
    </div> -->

    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stat-cards no-wrap-row fixed-width-row">
      <div v-for="stat in stats" :key="stat.title" class="stat-col fixed-stat-col">
        <el-card shadow="never" class="stat-card compact-stat-card">
          <div>
            <div class="stat-card-title">{{ stat.title }}</div>
            <div class="stat-card-num" :style="{ color: stat.color }">{{ stat.value }}</div>
          </div>
          <i :class="['stat-icon', stat.icon]" :style="{ color: stat.color }"></i>
        </el-card>
      </div>
    </el-row>
    <!-- 销售趋势图表区 -->
    <div class="dashboard-main">
      <div class="dashboard-main-left">
        <div class="dashboard-tabs">
          <el-tabs v-model="salesTab" @tab-click="onSalesTabChange">
            <el-tab-pane v-for="tab in salesTabs" :key="tab" :label="tab" :name="tab"></el-tab-pane>
          </el-tabs>
        </div>
        <div id="sales-chart" style="width:100%;height:280px;"></div>
      </div>
      <div class="dashboard-main-right">
        <div class="dashboard-annual-card">
          <div class="dashboard-annual-title">{{ annualStats.year }}年统计</div>
          <div class="dashboard-annual-row">
            总订单数
            <span class="dashboard-annual-value">{{ annualStats.totalOrders }}</span>
            单
          </div>
          <div class="dashboard-annual-row">
            总用户数
            <span class="dashboard-annual-value">{{ annualStats.totalUsers }}</span>
            人
          </div>
          <div class="dashboard-annual-row">
            年度同比
            <span class="dashboard-annual-rate" :class="annualStats.growthType">
              <span v-if="annualStats.growthType === 'up'" style="font-size:16px;">▲</span>
              <span v-else style="font-size:16px;">▼</span>
              {{ annualStats.growthRate }}%
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 表格+环形图区 -->
    <div class="dashboard-table-section">
      <div class="dashboard-table">
        <div class="dashboard-table-title">热门商品排行</div>
        <el-tabs v-model="tableTab" @tab-click="onTableTabChange" size="small">
          <el-tab-pane v-for="tab in tableTabs" :key="tab" :label="tab" :name="tab"></el-tab-pane>
        </el-tabs>
        <el-table :data="tableData" style="width: 100%;margin-top:10px;" size="small" border row-key="rank">
          <el-table-column prop="rank" label="排名" width="60" align="center">
            <template slot-scope="scope">
              <span
                :class="['product-rank-badge', scope.row.rank === 1 ? 'top1' : scope.row.rank === 2 ? 'top2' : scope.row.rank === 3 ? 'top3' : '']">{{
                  scope.row.rank }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="商品名称" min-width="110">
            <template slot-scope="scope">
              <span class="product-name-cell">{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="amount" label="商品金额" width="130" align="right">
            <template slot-scope="scope">
              <span class="product-amount-cell">￥{{ scope.row.amount }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="orders" label="下单次数" width="110" align="right">
            <template slot-scope="scope">
              <span class="product-orders-cell">{{ scope.row.orders }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="trend" label="日涨幅" width="100" align="right">
            <template slot-scope="scope">
              <span class="product-trend-cell">
                <span v-if="scope.row.trend >= 0" class="trend-up">▲ {{ scope.row.trend }}</span>
                <span v-else class="trend-down">▼ {{ Math.abs(scope.row.trend) }}</span>
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="上架时间" width="120">
            <template slot-scope="scope">
              <span class="product-date-cell">{{ scope.row.date }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="dashboard-pie">
        <div class="dashboard-pie-title">类别占比</div>
        <div id="pie-chart" style="width:420px;height:340px;"></div>
        <!-- <div class="dashboard-pie-legend">
          <span class="dashboard-pie-legend-item" v-for="item in pieData" :key="item.name">
            <span class="dashboard-pie-legend-color" :style="{ background: pieColors[item.name] || '#ccc' }"></span>
            <span>{{ item.name }}</span>
          </span>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import { equipmentCount } from "@/api/equipment/main";
export default {
  name: 'DashboardDemo',
  data() {
    return {
      // 统计卡片和设备类型菜单数据
      stats: [
        { title: '总设备数', value: 0, icon: 'el-icon-s-grid', color: '#333' },
        { title: '在线设备数', value: 0, icon: 'el-icon-circle-check', color: '#67C23A' },
        { title: '闲置设备数', value: 0, icon: 'el-icon-box', color: '#409EFF' },
        { title: '待检修设备数', value: 0, icon: 'el-icon-setting', color: '#E6A23C' },
        { title: '待报废设备数', value: 0, icon: 'el-icon-delete', color: '#ffc833' },
        // { title: '已报废设备数', value: 0, icon: 'el-icon-delete', color: '#F56C6C' },
        { title: '维修中设备数', value: 0, icon: 'el-icon-set-up', color: '#ffa4a4' },
        // { title: '设备类型数', value: 0, icon: 'el-icon-menu', color: '#8e44ad', isTypeCount: true },
      ],
      cards: [
        { title: '设备总数', value: 128, trend: '+5%', trendType: 'up', unit: '台', desc: '本月新增 6 台', icon: 'el-icon-user', iconHtml: '<svg t="1718000000000" class="icon" viewBox="0 0 1024 1024" width="28" height="28"><path d="M512 512c141.4 0 256-114.6 256-256S653.4 0 512 0 256 114.6 256 256s114.6 256 256 256zm0 64c-176.7 0-512 88.4-512 264v120c0 35.3 28.7 64 64 64h896c35.3 0 64-28.7 64-64V840c0-175.6-335.3-264-512-264z" fill="#409EFF"/></svg>' },
        { title: '运行中设备', value: 97, trend: '', trendType: '', unit: '台', desc: '稼动率 75.8%', icon: 'el-icon-view', iconHtml: '<svg t="1718000000001" class="icon" viewBox="0 0 1024 1024" width="28" height="28"><path d="M512 128C300.3 128 128 300.3 128 512s172.3 384 384 384 384-172.3 384-384S723.7 128 512 128zm0 704c-176.7 0-320-143.3-320-320s143.3-320 320-320 320 143.3 320 320-143.3 320-320 320z" fill="#67C23A"/></svg>' },
        { title: '本月工时', value: 4320, trend: '', trendType: '', unit: '小时', desc: '同比增长 3.2%', icon: 'el-icon-coin', iconHtml: '<svg t="1718000000002" class="icon" viewBox="0 0 1024 1024" width="28" height="28"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 832c-211.8 0-384-172.2-384-384s172.2-384 384-384 384 172.2 384 384-172.2 384-384 384z" fill="#E6A23C"/></svg>' },
        { title: '维修次数', value: 14, trend: '', trendType: '', unit: '次', desc: '本月减少 2 次', icon: 'el-icon-money', iconHtml: '<svg t="1718000000003" class="icon" viewBox="0 0 1024 1024" width="28" height="28"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 832c-211.8 0-384-172.2-384-384s172.2-384 384-384 384 172.2 384 384-172.2 384-384 384z" fill="#F56C6C"/></svg>' }
      ],
      annualStats: { year: 2025, totalOrders: 320, totalUsers: 128, growthRate: 6.5, growthType: 'up' },
      salesTabs: ['投运台数', '维修次数'],
      salesTab: '投运台数',
      salesMonths: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      salesData: {
        '投运台数': [8, 12, 10, 15, 18, 14, 13, 16, 20, 19, 22, 8],
        '维修次数': [2, 1, 3, 2, 1, 2, 1, 2, 3, 2, 1, 1]
      },
      tableTabs: ['今日', '本周', '本月', '全年'],
      tableTab: '今日',
      tableData: [
        { rank: 1, name: '旋挖钻机 SR285R', amount: 3200000, orders: 12, trend: 2, date: '2023-01-01' },
        { rank: 2, name: '液压打桩锤 YZ-200', amount: 2100000, orders: 9, trend: 1, date: '2023-02-15' },
        { rank: 3, name: '履带式打桩机 ZYJ-400', amount: 2800000, orders: 8, trend: 0, date: '2023-03-10' },
        { rank: 4, name: '静力压桩机 JZJ-1200', amount: 3500000, orders: 7, trend: -1, date: '2023-04-05' },
        { rank: 5, name: '柴油锤打桩机 CX-150', amount: 1800000, orders: 6, trend: 1, date: '2023-05-20' },
        { rank: 6, name: '步履式打桩机 BL-80', amount: 1600000, orders: 5, trend: 0, date: '2023-06-15' },
        { rank: 7, name: '振动打桩锤 ZD-90', amount: 1950000, orders: 5, trend: -2, date: '2023-08-10' },
        { rank: 8, name: '光伏打桩机 GF-60', amount: 1200000, orders: 4, trend: 1, date: '2023-09-01' },
        { rank: 9, name: '多功能打桩机 DGN-300', amount: 2500000, orders: 3, trend: 0, date: '2023-10-10' },
        { rank: 10, name: '小型打桩机 XX-30', amount: 800000, orders: 2, trend: 0, date: '2023-11-01' }
      ],
      pieData: [
        { value: 35, name: '旋挖钻机' },
        { value: 25, name: '液压打桩锤' },
        { value: 18, name: '履带式打桩机' },
        { value: 12, name: '静力压桩机' },
        { value: 10, name: '其他' }
      ],
      userMenu: [
        { label: '个人中心', icon: 'el-icon-user' },
        { label: '退出登录', icon: 'el-icon-switch-button' }
      ],
      userName: '管理员',
      pieColors: {
        '旋挖钻机': '#409EFF',
        '液压打桩锤': '#91CC75',
        '履带式打桩机': '#FAC858',
        '静力压桩机': '#EE6666',
        '其他': '#73C0DE'
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getCount()
      this.renderSalesChart()
      this.renderPieChart()
    })
  },
  methods: {
    getCount() {
      equipmentCount().then(response => {
        // console.log(11, response);
        this.stats[0].value = response.data[0]
        this.stats[1].value = response.data[1]
        this.stats[2].value = response.data[2]
        this.stats[3].value = response.data[3]
        this.stats[4].value = response.data[6]
        // this.stats[5].value = response.data[4]
        // this.stats[6].value = response.data[5]
        this.stats[5].value = response.data[5]
      });
    },
    onSalesTabChange(tab) {
      this.salesTab = tab.name
      this.$nextTick(this.renderSalesChart)
    },
    onTableTabChange(tab) {
      this.tableTab = tab.name
    },
    renderSalesChart() {
      const chart = echarts.init(document.getElementById('sales-chart'))
      chart.setOption({
        tooltip: { trigger: 'axis' },
        grid: { left: 30, right: 20, top: 30, bottom: 30 },
        xAxis: { type: 'category', data: this.salesMonths, axisTick: { alignWithLabel: true } },
        yAxis: { type: 'value' },
        series: [{
          data: this.salesData[this.salesTab],
          type: 'bar',
          barWidth: '50%',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#409EFF' },
              { offset: 1, color: '#6ec6ff' }
            ]),
            borderRadius: [8, 8, 0, 0]
          }
        }]
      })
    },
    renderPieChart() {
      const chart = echarts.init(document.getElementById('pie-chart'))
      chart.setOption({
        tooltip: { trigger: 'item' },
        legend: { bottom: 0, textStyle: { fontSize: 13 } },
        series: [{
          name: '类别占比',
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 3,
            shadowBlur: 10,
            shadowColor: 'rgba(64,158,255,0.12)'
          },
          label: { show: false },
          emphasis: { label: { show: true, fontSize: 16, fontWeight: 'bold' } },
          labelLine: { show: false },
          data: this.pieData.map(item => {
            let color = '#5470C6'
            if (item.name === '旋挖钻机') color = '#409EFF'
            if (item.name === '液压打桩锤') color = '#91CC75'
            if (item.name === '履带式打桩机') color = '#FAC858'
            if (item.name === '静力压桩机') color = '#EE6666'
            if (item.name === '其他') color = '#73C0DE'
            return { ...item, itemStyle: { color } }
          })
        }]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.stat-cards {
  margin-bottom: 24px;
}

.stat-card {
  position: relative;

  .el-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 80px;
    padding-right: 60px;
  }

  .stat-icon {
    position: absolute;
    right: 16px;
    top: 16px;
    font-size: 48px;
    pointer-events: none;
    z-index: 1;
  }

  .stat-card-title {
    color: #606266;
    font-size: 14px;
    margin-bottom: 10px;
    font-weight: 500;
    z-index: 2;
  }

  .stat-card-num {
    font-size: 32px;
    font-weight: bold;
    z-index: 2;
    position: relative;
  }
}

.no-wrap-row {
  flex-wrap: nowrap !important;
  overflow-x: auto;
}

.stat-col {
  min-width: 160px;
}

.compact-stat-card .el-card__body {
  min-height: 60px;
  padding-right: 40px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.stat-card-title {
  font-size: 13px;
  margin-bottom: 6px;
}

.stat-card-num {
  font-size: 24px;
}

.stat-icon {
  font-size: 32px !important;
  top: 10px !important;
  right: 10px !important;
}

.fixed-width-row {
  flex-wrap: nowrap !important;
  overflow-x: visible;
  display: flex;
  gap: 20px 20px;
  /* 行间和列间间隙 */
}

.fixed-stat-col {
  flex: 1;
  min-width: 185px;
  /* 让每个卡片平均分配空间，在一行铺满 */
}

.fixed-stat-col:last-child {
  margin-right: 0;
}

.dashboard-container {
  padding: 10px;
  background: linear-gradient(135deg, #eaf6ff 0%, #f5f8ff 100%);
  min-height: 100vh;
  font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
  color: #222;
  background-image: repeating-linear-gradient(135deg, rgba(64, 158, 255, 0.03) 0 2px, transparent 2px 40px);

  .dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-radius: 22px;
    padding: 0 48px;
    height: 76px;
    margin-bottom: 32px;
    box-shadow: 0 6px 32px rgba(64, 158, 255, 0.08);
    border: 1px solid #eaf4ff;

    .logo {
      display: flex;
      align-items: center;

      img {
        width: 44px;
        height: 44px;
        margin-right: 18px;
      }
    }

    .sys-name {
      font-size: 28px;
      font-weight: bold;
      color: #409EFF;
      letter-spacing: 1.5px;
      text-shadow: 0 2px 8px rgba(64, 158, 255, 0.08);
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 22px;
    }

    .user-dropdown {
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .user-name {
      font-size: 16px;
      color: #333;
      font-weight: 500;
    }
  }



  .dashboard-main {
    display: flex;
    gap: 32px;
    margin-bottom: 36px;

    .dashboard-main-left {
      flex: 2;
      background: #fff;
      border-radius: 22px;
      padding: 34px 38px 22px 38px;
      box-shadow: 0 4px 24px rgba(64, 158, 255, 0.10);
      min-width: 0;
    }

    .dashboard-main-right {
      flex: 1;
      background: linear-gradient(135deg, #409EFF 0%, #6ec6ff 100%);
      border-radius: 22px;
      padding: 34px 28px 22px 28px;
      box-shadow: 0 4px 24px rgba(64, 158, 255, 0.10);
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      overflow: hidden;

      &::before {
        content: '';
        position: absolute;
        right: -40px;
        top: -40px;
        width: 120px;
        height: 120px;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0) 80%);
        border-radius: 50%;
        z-index: 1;
      }

      .dashboard-annual-card {
        width: 100%;
        background: transparent;
        border-radius: 16px;
        padding: 22px 14px 18px 14px;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #fff;
        position: relative;
        z-index: 2;

        .dashboard-annual-title {
          font-size: 22px;
          font-weight: bold;
          color: #fff;
          margin-bottom: 18px;
          letter-spacing: 1.5px;
          text-shadow: 0 2px 8px rgba(64, 158, 255, 0.10);
        }

        .dashboard-annual-row {
          display: flex;
          align-items: center;
          font-size: 17px;
          margin-bottom: 10px;
          color: #e3f2fd;
          font-weight: 500;

          .dashboard-annual-value {
            font-size: 26px;
            font-weight: bold;
            color: #fff;
            margin-left: 12px;
            margin-right: 4px;
            text-shadow: 0 2px 8px rgba(64, 158, 255, 0.10);
          }

          .dashboard-annual-rate {
            font-size: 16px;
            margin-left: 12px;
            display: flex;
            align-items: center;

            &.up {
              color: #fff;
            }

            &.down {
              color: #ffd6d6;
            }
          }
        }
      }
    }
  }

  .dashboard-table-section {
    display: flex;
    gap: 32px;

    .dashboard-table {
      flex: 2;
      background: #fff;
      border-radius: 22px;
      padding: 34px 38px 22px 38px;
      box-shadow: 0 4px 24px rgba(64, 158, 255, 0.10);
      min-width: 0;

      .dashboard-table-title {
        font-size: 19px;
        font-weight: bold;
        margin-bottom: 20px;
        letter-spacing: 1.2px;
      }

      .el-table th {
        background: #f5f8ff !important;
        color: #409EFF;
        font-weight: 600;
        font-size: 16px;
        border-bottom: 1px solid #eaf4ff;
        letter-spacing: 0.5px;
      }

      .el-table__body tr {
        border-radius: 12px;
        transition: background 0.2s;
      }

      .el-table__body tr:hover>td {
        background: #eaf4ff !important;
      }

      .el-table__row {
        border-radius: 12px;
      }

      .el-table td {
        border-bottom: 1px solid #f0f3fa;
        font-size: 16px;
        padding: 12px 0;
      }

      .el-table .cell {
        display: flex;
        align-items: center;
      }

      .product-name-cell {
        font-weight: 600;
        color: #222;
        font-size: 16px;
      }

      .product-amount-cell,
      .product-orders-cell,
      .product-trend-cell {
        justify-content: flex-end;
        font-variant-numeric: tabular-nums;
        width: 100%;
        font-size: 17px;
        font-weight: 600;
        color: #222;
      }

      .product-trend-cell .trend-up {
        color: #67C23A;
        font-weight: 600;
        margin-left: 2px;
        font-size: 15px;
      }

      .product-trend-cell .trend-down {
        color: #F56C6C;
        font-weight: 600;
        margin-left: 2px;
        font-size: 15px;
      }

      .product-date-cell {
        color: #888;
        font-size: 14px;
      }
    }

    .dashboard-pie {
      flex: 1;
      background: #fff;
      border-radius: 22px;
      padding: 34px 28px 22px 28px;
      box-shadow: 0 4px 24px rgba(64, 158, 255, 0.10);
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .dashboard-pie-title {
        font-size: 19px;
        font-weight: bold;
        margin-bottom: 20px;
        text-align: center;
        letter-spacing: 1.2px;
      }

      .dashboard-pie-legend {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 24px;
        background: #f8fafc;
        border-radius: 14px;
        padding: 16px 28px 12px 28px;
        margin-top: 26px;
        box-shadow: 0 1px 4px rgba(64, 158, 255, 0.04);
        max-width: 360px;
        min-width: 180px;
        margin-left: auto;
        margin-right: auto;

        .dashboard-pie-legend-item {
          display: flex;
          align-items: center;
          gap: 10px;
          font-size: 15px;
          color: #444;
          font-weight: 500;
          white-space: nowrap;

          .dashboard-pie-legend-color {
            display: inline-block;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            box-shadow: 0 1px 4px rgba(64, 158, 255, 0.10);
            border: 2px solid #fff;
          }
        }
      }
    }
  }

  @media (max-width: 1100px) {

    .dashboard-main,
    .dashboard-table-section {
      flex-direction: column;
    }

    .dashboard-main-left,
    .dashboard-main-right,
    .dashboard-table,
    .dashboard-pie {
      width: 100%;
      margin-bottom: 32px;
    }

    .stat-cards {
      .fixed-stat-col {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
      }
    }

  }

  @media (max-width: 700px) {
    .dashboard-header {
      flex-direction: column;
      height: auto;
      padding: 16px 8px;

      .logo {
        margin-bottom: 10px;
      }
    }

    .stat-cards {
      .fixed-stat-col {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
      }
    }

    .dashboard-main-left,
    .dashboard-main-right,
    .dashboard-table,
    .dashboard-pie {
      padding: 12px 4px 8px 4px;
    }

    .dashboard-table-section {
      gap: 10px;
    }

    .dashboard-pie-legend {
      gap: 10px;
      padding: 10px 6px 6px 6px;
      font-size: 12px;
      max-width: 98vw;

      .dashboard-pie-legend-color {
        width: 12px;
        height: 12px;
      }

      .dashboard-pie-legend-item {
        font-size: 12px;
      }
    }
  }
}
</style>